<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-siteapp,no-cache,no-store">
    <meta http-equiv="Expires" content="0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>角色资源</title>
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/css/main.css}" media="all" />

    <style>
        .div-blod{ font-weight: bold; }
        .div-break{ line-height: 40px;display:block;word-break: break-all;word-wrap: break-word; }
        .layui-colla-item{ margin-bottom: 5px;}
        .sysNotice-win65 { width: 65%;}
        .sysNotice-win34 { width: 34%;}
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>角色 >>> 权限分配</legend>
</fieldset>
<div class="layui-main">
    <div class="row">
        <div class="layui-collapse sysNotice col sysNotice-win65">
            <form class="layui-form" action="">
                <!-- 权限列表 -->
                <div class="layui-colla-item" th:each="t1 : ${tree}">
                    <h2 class="layui-colla-title" th:text="${t1.text}">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
                    <div class="layui-colla-content layui-show" th:if="${t1.children != null}">
                        <div class="layui-colla-item" th:each="t2 : ${t1.children}">
                            <h2 class="layui-colla-title" th:text="${t2.text}">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
                            <div class="layui-colla-content layui-show" th:if="${t1.children != null}">
                                <div class="layui-colla-item" th:each="t3: ${t2.children}">
                                    <h2 class="layui-colla-title" th:text="${t3.text}">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
                                    <div class="layui-colla-content layui-show">
                                        <div class="layui-form-item">
                                            <input type="checkbox" name="all" lay-skin="primary" lay-filter="allChoose" title="全选">
                                            <th:block th:each="t4: ${t3.children}">
                                                <input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose" th:title="${t4.text}" th:checked="${t4.checked}" th:value="${t4.id}">
                                            </th:block>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- 角色信息 -->
        <div class="sysNotice col sysNotice-win34">
            <fieldset class="layui-elem-field site-demo-button">
                <legend>角色信息</legend>
                <div>
                    <div class="layui-form-item">
                        <label class="layui-form-label div-blod">角色标记码:</label>
                        <div class="layui-input-block">
                            <div class="div-break" th:text="${role.roleKey}"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label div-blod">角色名称:</label>
                        <div class="layui-input-block">
                            <div class="div-break" th:text="${role.roleName}"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label div-blod">角色描述:</label>
                        <div class="layui-input-block">
                            <div class="div-break" th:text="${role.roleDesc}"></div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<form class="layui-form" method="POST">
    <input type="hidden" name="roleId" th:value="${role.roleId}"/>
    <input type="hidden" name="resourceIdAndOperationKey"/>
    <div class="layui-form-item">
        <div class="layui-input-block" style="margin: 20px 0 0 200px;">
            <button class="layui-btn" lay-submit="" lay-filter="save">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" id="back">返回</button>
        </div>
    </div>
</form>
<script th:src="@{/plugins/layui/layui.js}"></script>
<script>
    layui.config({
        base : '../../build/js/',
        version : '1.0.1'
    }).use([ 'table', 'common'], function() {
        var table = layui.table, $ = layui.$, common = layui.common, form = layui.form;

        form.on('checkbox(itemChoose)',function(data){
            var sib = $(data.elem).parent().find('input[type="checkbox"]:checked').length; // 选中个数
            var total = $(data.elem).parent().find('input[type="checkbox"]').length - 1; // 总个数，排除全选
            // 全选选择则选中数-1
            if($(this).parent().find('input[name="all"]').prop("checked")) {
                sib = sib - 1;
            }
            if(sib == total){
                $(this).parent().find('input[name="all"]').prop("checked",true);
                form.render();
            }else{
                $(this).parent().find('input[name="all"]').prop("checked",false);
                form.render();
            }
        });

        //全选反选
        form.on('checkbox(allChoose)', function(data){
            var that = this;
            $(this).next().next().find("input:checkbox[name!='all']").each(function(index, item){
                this.checked = that.checked;
            });
            form.render('checkbox');
        });

        // 关闭弹窗
        $("#back").on('click', function() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });

        /**保存*/
        form.on("submit(save)", function(data) {
            var url = "/auth/role/updateRoleResource.json";
            var values = [];
            $("input[name!='all']:checked").each(function() {
                values.push($(this).val());
            });
            // 填充权限参数
            data.field.resourceIdAndOperationKey = values.join(',');
            // common.layerMsg(JSON.stringify(data.field));
            //异步表单提交
            common.fromPostAjax(url, data.field);
            return false;
        });
    });

</script>
</body>
</html>